<!--
 * @Author: wangming
 * @Date: 2022-03-08 17:33:35
 * @LastEditors: wangming
 * @LastEditTime: 2022-03-10 17:58:36
 * @FilePath: /hanma-application-designer-fed/src/components/globalizationConfigWord.vue
 * @Description: 
-->
<template>
  <el-popover
    placement="top-start"
    :title="globalTitleBak"
    width="200"
    trigger="hover"
    :disabled="!localism || localismDeleted"
  >
    <div v-html="globalContentBak"></div>
    <span
      @click.stop="setLangCode"
      style="vertical-align: middle"
      slot="reference"
      class="lh1"
    >
      <IconPark
        style="cursor: pointer; vertical-align: middle"
        size="16"
        theme="outline"
        type="translate"
        :fill="!localism || localismDeleted ? '#333' : '#409EFF'"
      />
      <el-tooltip
        v-if="localismDeleted"
        class="item"
        effect="dark"
        content="该资源标识不存在，请重新配置！"
        placement="top"
      >
        <i class="el-icon-warning-outline"></i>
      </el-tooltip>
    </span>
  </el-popover>
</template>

<script>
import { IconPark } from "@icon-park/vue/es/all";
import GlobalizationConfig from "@/components/globalizationConfig/index";
import { LANG_CODE } from "@/utils/enum";
import { getHmi18ninfoInfoByKey } from "@/apis/paas/HmI18nInfoController.js";
import { getHmi18nlocaleList } from "@/apis/paas/HmI18nLocaleController.js";

export default {
  name: "GlobalizationConfigWord",
  components: {
    IconPark,
    GlobalizationConfig,
  },
  props: {
    localism: {
      type: String,
      default: () => "",
    },
  },
  data() {
    return {
      LANG_CODE,
      globalContentBak: "",
      globalTitleBak: "",

      localismDeleted: false,
    };
  },
  watch: {
    localism(val) {
      if (val) {
        this.getHmi18ninfoInfoByKey(val);
      }
    },
  },

  created() {
    this.localismDeleted = false;
    this.localism && this.getHmi18ninfoInfoByKey(this.localism);
  },

  methods: {
    async getHmi18ninfoInfoByKey(key) {
      const langArr = await getHmi18nlocaleList({ useCache: true });
      this.globalTitleBak = "";
      this.globalContentBak = "";
      this.localismDeleted = false;
      getHmi18ninfoInfoByKey({ key: key }, { useCache: true }).then((res) => {
        if (!res) {
          this.localismDeleted = true;
          this.$emit("setLangCode", "");
          return;
        }
        this.globalTitleBak = `语言标识：${res.key}`;
        res.infoList.forEach((ele) => {
          if (
            langArr.find((item) => {
              return item.key === ele.locale;
            })
          ) {
            this.globalContentBak += `<strong>${
              LANG_CODE.filter((item) => item.value === ele.locale)[0]?.label
            }：</strong>${ele.info}<br/>`;
          }
        });
      });
    },
    setLangCode() {
      GlobalizationConfig.addForm().then((localism) => {
        this.$emit("setLangCode", localism);
      });
    },
  },
};
</script>

<style></style>
